<template>
  <div>
    <section class="main">
      <input id="toggle-all" class="toggle-all" type="checkbox" />
      <label for="toggle-all">Mark all as complete</label>
      <ul class="todo-list">
        <li
          v-for="item in $store.state.list"
          :key="item.id"
          :class="{completed:item.done,editing:item.id==currentEditingItem}"
        >
          <div class="view">
            <input class="toggle" type="checkbox" :checked="item.done" @input="changeDone(item.id)" />
            <label @dblclick="editItem(item.id)">{{ item.name }}</label>
            <button class="destroy" @click="deleteItem(item.id)"></button>
          </div>
          <input class="edit" :value="item.name" @keyup.enter="confirmEdit($event)" />
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 记录当前激活修改框的项
      currentEditingItem: -1,
      // 存储修改框的数据
      newName: ""
    };
  },
  methods: {
    // 改变项的完成状态
    changeDone(id) {
      console.log("开始改变项的完成状态");
      this.$store.commit("changeDone", { id });
    },
    // 删除项
    deleteItem(id) {
      console.log("开始删除");
      this.$store.commit("deleteItem", { id });
    },
    // 修改项
    editItem(id) {
      console.log("开始修改项");
      this.currentEditingItem = id;
    },
    // 确认修改
    confirmEdit(e) {
      // this.currentEditingItem = -1;
      console.log(e.target.value);
      this.$store.commit("confirmEdit", {
        id: this.currentEditingItem,
        newName: e.target.value
      });
      // 修改完成后隐藏修改框
      this.currentEditingItem = -1;
    }
  }
};
</script>

<style lang="css" scoped>
</style>